<template>
  <div class="myOrder">
    <div class="headerBox">
      <!-- <van-nav-bar
        title="我的认购单"
        right-text="退款记录"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      ></van-nav-bar> -->
      <van-nav-bar
        title="线上订单"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
      <van-tabs v-model="activeName" animated sticky @change="getList(true)">
        <van-tab title="全部" name=""></van-tab>
        <van-tab title="待支付" name="0"></van-tab>
        <van-tab title="已完成" name="2"></van-tab>
        <van-tab title="已取消" name="4"></van-tab>
      </van-tabs>
    </div>
    <!-- <div class="coment" :style="{'paddingTop': `calc(${1.8+'rem + '+$headerH+'px'})`}"> -->
    <div class="coment">
      <div class="com_box" v-if="dataList.length>0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <div class="info_box" v-for="(item,index) in dataList" :key="index" @click.stop="goOrderDetail(item)">
            <div class="top_info">
              <span>订单号：{{item.orderNumber}}</span>
              <span class="time">{{item.orderTime}}</span>
            </div>
            <div class="shopping_box">
              <img :src="imgPath+item.goodsCoverImg" alt="" @click.stop="goGoods(item)">
              <div class="rg_box">
                <h3>{{item.goodsName}}</h3>
                <span class="alone_pic">￥{{item.unitPrice}}/份</span>
                <div class="pic_box">
                  <span>X{{item.orderQuantity}}</span>
                  <div class="all_pic">
                    <span class="text">合计:</span>
                    <span class="pic_color">￥{{item.orderDiscountTotalPrice}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="btm_info">
              <div class="lf_box">
                <span v-if="item.orderStatus==0" class="payType payType0">待支付</span>
                <!-- <span style="color:#F6741F">待确认</span> -->
                <span v-else-if="item.orderStatus==2" class="payType payType2">已完成</span>
                <span v-else-if="item.orderStatus==4" class="payType payType4">已取消</span>
                <span v-else>其他</span>
              </div>
              <div class="rg_hj">
                <span class="repal" v-if="item.orderStatus==0" @click.stop="cancelFunc(item.orderId)">取消订单</span>
                <span class="pay" v-if="item.orderStatus==0" @click.stop="orderAliPayFunc(item.orderId,item.goodsId)">立即付款</span>
                <span class="repal" v-if="item.orderStatus==2 && item.isOnShelf!=0 && item.orderType==1" @click.stop="popupShowFunc(item.orderId)">申请退款</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="noWallet" v-if="!loading&&dataList.length==0">
        <img src="@/assets/img/user/img_wudan@2x.png" alt="">
        <p>您还没订单呢</p>
      </div>
    </div>
    <van-overlay :show="popupShow" @click="popupShow = false">
      <div class="confirmBox" @click.stop>
        <p class="txt2">退款理由</p>
        <div>
          <van-field
            class="textarea"
            v-model="refundDirections"
            rows="4"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请填写退款理由…"
          />
          <!-- show-word-limit -->
        </div>
        <div class="flex">
          <p class="handlerBtn handlerBtn2" @click="popupShow=false">取 消</p>
          <p class="handlerBtn handlerBtn3" @click="returnFunc">确 认</p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import config from "@/config/env";
export default {
  data() {
    return {
      popupShow:false,
      refundDirections:'',
      activeName:'',
      orderStatus:'',
      dataList:[],
      imgPath:'',
      loading: false,
      finished: false,
      page:1,
      pageSize:5
    };
  },
  beforeRouteLeave(to,from,next){
    if(to.name=='myOrderDetail') {
      from.meta.keepAlive=true
    }else {
      from.meta.keepAlive=false
      this.$destroy()
    }
    next()
  },
  created() {
    this.imgPath = config.ossUrl;
    this.getList()
  },
  methods: {
    popupShowFunc(orderId){
      this.orderId=orderId
      this.popupShow=true
    },
    // 退款
    async returnFunc(){
      if(!this.refundDirections){
        this.$toast('请填写退款理由')
        return
      }
      let res = await this.$http.refundOrder({orderId:this.orderId,refundDirections:this.refundDirections});
      if (res) {
        this.$toast('提交成功')
        this.$router.push({name:'myCustoms'})
      }
    },
    // 取消订单
    cancelFunc(orderId){
      this.$dialog.confirm({
        title: '提示',
        message: '确定要取消订单吗？',
        theme: 'round-button',
        confirmButtonColor:'#00C8E7',
        cancelButtonColor:'#C8CEDA',
      })
      .then(async () => {
        let res = await this.$http.cancelOrder({orderId:orderId});
        if (res) {
          this.$toast('取消成功')
          this.getList(true)
        }
      })
      .catch(() => {
      });
    },
    // 继续付款
    async orderAliPayFunc(orderId,goodsId){
        let res = await this.$http.orderAliPay({orderId:orderId});
        if (res) {
          let orderInfo =res.data
          this.payFunc(orderInfo,orderId,goodsId)
        }
    },
    payFunc(orderInfo,orderId,goodsId){
      let self = this
      var aliPayPlus = api.require('aliPayPlus');
      aliPayPlus.payOrder({
          orderInfo: orderInfo
      }, function(ret, err) {
        if(ret.code==9000){
          //9000：支付成功
          setTimeout(()=>{
            self.go1('myOrderDetail',orderId,goodsId)
          })
        } else if(ret.code==8000){
          self.$toast("正在处理中");
        } else if(ret.code==4000){
          setTimeout(()=>{
            self.go1('myOrderDetail',orderId,goodsId)
          })
        } else if(ret.code==5000){
          self.$toast("重复请求");
        } else if(ret.code==6001){
          //6001：用户中途取消支付操作
          setTimeout(()=>{
            self.go1('myOrderDetail',orderId,goodsId)
          })
        } else if(ret.code==6002){
          self.$toast("网络连接出错");
        } else if(ret.code==6004){
          self.$toast("正在处理中");
        }
      });
    },
    go(name){
      this.$router.push({name:name})
    },
    go1(name,orderId,goodsId){
     this.$router.push({ name: name ,query:{orderId:orderId,goodsId:goodsId,origin:'myOrder'}});
    },
    goGoods(item){
      if (item.isOnShelf==0){
        this.$toast('该商品已下架')
        return
      }
      this.$router.push({name:'goodsDetail',query:{id:item.goodsId}})
    },
    goOrderDetail(row){
      this.go1('myOrderDetail',row.orderId,row.goodsId)
    },
    async getList(val) {
      this.loading = true
      if(val) {
        this.page=1
        this.dataList=[]
      }
      let res = await this.$http.userOrderDetail({orderStatus:this.activeName||undefined,page:this.page,pageSize:this.pageSize,orderType:1})
      if (res) {
        setTimeout(()=>{
          this.page++
          this.dataList=this.dataList.concat(res.data.list)
          this.loading = false;
          if (this.dataList.length >= res.data.totalSize) {
            this.finished = true;
          } else {
            this.finished = false;
          }
        })
      }else{
        this.loading = false;
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.$router.push({name: 'myCustoms'})
    }
  },
};
</script>
<style>
.textarea{
  background:#F5F5F5 ;
  margin: 0.2rem 0 0.4rem;
}
</style>
<style scoped>
.fixedBox{
  position: fixed;
  height: 90px;
  width: 100%;
  z-index: 1;
  box-shadow: 0px 0px 30px 0px rgba(210,215,229,0.5);
}
.myOrder{
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* overflow-x:hidden; */
}
.coment{
  height: calc(100vh - 119px);
  overflow-y:auto;
  
  /* padding-top: 90px; */
}
.com_box{
  padding: 0 .29rem;
  
}
.info_box{
  margin-top: .2rem;
  height: 3.7rem;
  background: #FFFFFF;
  border-radius: .08rem;
}
.top_info,.btm_info{
  height: .66rem;
  line-height: .66rem;
  font-size: .24rem;
  padding: 0 .24rem;
  border-bottom: 1px solid #F5F3F3;
}
.btm_info{
  height: .82rem;
  line-height: .82rem;
  width: 100%;
  border: none;
  border-top: 1px solid #F5F3F3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.time{
  float: right;
  color: #999999;
}
.shopping_box{
  width: 100%;
  padding: .18rem .24rem;
  height: 2.19rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.shopping_box>img{
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .08rem;
}
.rg_box{
  width: 4.5rem;
  padding: .12rem 0;
}
.rg_box > h3 {
  font-size: .32rem;
  margin-bottom: .1rem;
}
.rg_box .alone_pic{
  font-size: .26rem;
}
.rg_box .pic_box{
  margin-top: .36rem;
}
.rg_box .pic_box .all_pic{
  float: right;
  font-size: .26rem;
  font-weight: 600;
}
.rg_box .pic_box .all_pic .pic_color{
  color: #F30F0F;
}
.btm_info .lf_box{

}
.payType0{
  color: #F6741F;
}
.payType2{
  color: #333;
}
.payType4{
  color: #8A94A8;
}
.payType::before{
  display: inline-block;
  content: '';
  width: .1rem;
  height: .1rem;
  border-radius: 50%;
  background: #F6741F;
  margin-right: .1rem;
  vertical-align: middle;
}
.payType0::before{
  background: #F6741F;
}
.payType2::before{
  background: #333;
}
.payType4::before{
  background: #8A94A8;
}
.rg_hj{
  width: 5rem;
  text-align: right;
  padding-top: .02rem;
}
.rg_hj > span{
  display: inline-block;
  box-sizing: border-box;
  padding: .1rem .18rem;
  border-radius: .22rem;
  border: .02rem solid #00BDDA;
  color: #00BDDA;
  height: .44rem;
  line-height: .24rem;
  margin-right: .12rem;
}
.rg_hj > span:last-child{
  margin-right: 0;
}
.rg_hj > span.repal{
  border: .02rem solid #8A94A8;
  color: #8A94A8;
}
.rg_hj > span.pay{
  border: .02rem solid #F30F0F;
  color: #F30F0F;
}
.confirmBox{
  position: relative;
  width: 6.54rem;
  height: 5.18rem;
  border-radius: 0.12rem;
  background: #fff;
  padding: 0 0.42rem;
  left: 50%;
  top: 50%;
  margin-left: -3.27rem;
  margin-top: -2.77rem;
}
.txt2{
  text-align: center;
  padding-top: 0.4rem;
  font-size: 0.36rem;
  font-weight: 600;
  margin-bottom: 0.16rem;
}
.handlerBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 2px solid #F1F1F1;
}
.handlerBtn{
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size:0.34rem;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.handlerBtn2{
  width: 2.7rem;
  background: #C8CEDA;
}
.handlerBtn3{
  width: 2.7rem;
  background: #00C8E7;
}
.noWallet{
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 1.3rem;
}
</style>